<template>
    <div class="search">
        <header>
            <div @click="back" class="back"><van-icon name="arrow-left" /></div>
            <div class="searchInput">
                <input @keydown.enter="search" v-model.trim="value" type="text" placeholder="搜索漫画" /><span @click="search"><van-icon name="search" /></span>
            </div>
        </header>
        <div class="loading" v-if="isShow"><LoadingImg /></div>
        <div class="box" v-else>
            <!-- <span class="love">猜你喜欢</span> -->
            <div class="content">
                <div @click="tiao(i.id)" class="item" v-for="(i, index) in list" :key="index">
                    <div class="img">
                        <img :src="i.horizontal_cover" alt="" />
                    </div>
                    <div class="introduce">
                        <span class="name">
                            {{ i.org_title }}
                        </span>
                        <span class="type">
                            {{ i.styles[0] }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import LoadingImg from "@/components/LoadingImg.vue";
export default {
    components: {
        LoadingImg,
    },
    data() {
        return {
            value: "",
            list: [],
            isShow: true,
        };
    },
    methods: {
        tiao(id) {
            this.$router.push({ name: "detailpage", params: { id: id } });
        },
        back() {
            this.$router.go(-1);
        },
        search() {
            this.getSearch(this.value);
        },
        getSearch(x) {
            this.isShow = true;
            this.$axios("https://apis.netstart.cn/bcomic/Search?styleId=-1&areaId=2&isFinish=-1&order=-1&pageNum=1&pageSize=20&isFree=-1&keyWord=" + x).then((data) => {
                this.list = data.data.data.list;
                this.isShow = false;
                this.value = "";
            });
        },
    },
    created() {},
};
</script>

<style lang="scss" scoped>
.search {
    header {
        height: 3.125rem;
        display: flex;
        align-items: center;
        justify-content: space-around;
        .back {
            display: flex;
            align-items: center;
            height: 2.1875rem;
            width: 2.5rem;
        }
        .searchInput {
            display: flex;
            height: 2.1875rem;
            width: 14.8125rem;
            background-color: rgb(222, 222, 222, 0.5);
            border-radius: 12px;
            input {
                flex: 1;
                border: none;
                outline: none;
                background-color: transparent;
                padding-left: 0.625rem;
                font-size: 0.875rem;
                text-align: center;
            }
            span {
                width: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }
    .box {
        margin-top: 1.875rem;
        padding: 0 1.125rem;
    }
    .content {
        margin-top: 1.25rem;
        .item {
            margin-top: 1.25rem;
        }
        .img {
            height: 10.9375rem;
            width: 100%;
            background-color: wheat;
            img {
                border-radius: 1rem;
                width: 100%;
                height: 100%;
            }
        }
        .introduce {
            padding: 0 0.625rem;
            height: 1.875rem;
            line-height: 1.875rem;
            display: flex;
            justify-content: space-between;
            .name {
                width: 15.625rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .type {
                color: #9c9c9c;
            }
        }
    }
}
</style>
